<template>
	<view class="my-container">
		<gui-page-loading ref="guipageloading">
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<view class="avatar-container" @tap="goto_my_edit()">
					<image class="user-avatar" :src="avatar_pic" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<text class="user-name" @tap="goto_my_edit()">{{ nickname }}</text>
					
					<!-- 身份切换按钮放在昵称下面 -->
					<view class="identity-section" v-if="member_identity_list.length > 1 && mobile !== ''">
						<view class="identity-btn" @tap="change_identity()">
							<text class="identity-icon">🔄</text>
							<text class="identity-text">身份切换</text>
						</view>
					</view>
					
					<!-- 登录按钮 -->
					<view class="login-section" v-if="mobile === ''">
						<view class="login-btn" @tap="goto_login()">
							<text class="login-icon">🔑</text>
							<text class="login-text">点击登录</text>
						</view>
					</view>
				</view>
				<view class="edit-btn" @tap="goto_my_edit()">
					<text class="edit-icon">✏️</text>
				</view>
			</view>
		</view>

		<!-- 轮播图区域 -->
		<view class="banner-section" v-if="swiperItems.length > 0">
			<gui-swiper :swiperItems="swiperItems" imgMode="scaleToFill" :width="750" :height="330"></gui-swiper>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-card">
				<text class="menu-title">我的服务</text>
				<view class="menu-list">
					<view class="menu-item" @tap="goto_order()">
						<view class="menu-icon order-icon">
							<text class="icon-emoji">📋</text>
						</view>
						<view class="menu-content">
							<text class="menu-name">我的订单</text>
							<text class="menu-desc">查看订单详情</text>
						</view>
						<text class="menu-arrow">></text>
					</view>
					
					<view class="menu-item" @tap="goto_collect()">
						<view class="menu-icon collect-icon">
							<text class="icon-emoji">❤️</text>
						</view>
						<view class="menu-content">
							<text class="menu-name">我的收藏</text>
							<text class="menu-desc">收藏的教练和球室</text>
						</view>
						<text class="menu-arrow">></text>
					</view>
					
					<view class="menu-item" @tap="goto_notice()">
						<view class="menu-icon message-icon">
							<text class="icon-emoji">📨</text>
						</view>
						<view class="menu-content">
							<text class="menu-name">我的消息</text>
							<text class="menu-desc">查看最新消息</text>
						</view>
						<view class="menu-badge" v-if="no_read_num > 0">
							<text class="badge-text">{{ no_read_num }}</text>
						</view>
						<text class="menu-arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 申请状态 -->
		<view class="apply-section">
			<view class="apply-card">
				<text class="menu-title">申请状态</text>
				<view class="apply-list">
					<view class="apply-item" @tap="goto_qiutong_apply()">
						<view class="apply-icon qiutong-icon">
							<text class="icon-emoji">🏓</text>
						</view>
						<view class="apply-content">
							<text class="apply-name">球童申请</text>
							<text class="apply-desc">成为专业球童</text>
						</view>
						<view :class="qiutong_class === 'gui-bg-blue' ? 'status-pending' : qiutong_class === 'gui-bg-orange' ? 'status-reviewing' : qiutong_class === 'gui-bg-green' ? 'status-approved' : qiutong_class === 'gui-bg-red' ? 'status-rejected' : 'status-pending'">
							<text class="status-text">{{ qiutong_status }}</text>
						</view>
						<text class="apply-arrow">></text>
					</view>
					
					<view class="apply-item" @tap="goto_zhujiao_apply()">
						<view class="apply-icon zhujiao-icon">
							<text class="icon-emoji">🎓</text>
						</view>
						<view class="apply-content">
							<text class="apply-name">助教申请</text>
							<text class="apply-desc">成为专业助教</text>
						</view>
						<view :class="zhujiao_class === 'gui-bg-blue' ? 'status-pending' : zhujiao_class === 'gui-bg-orange' ? 'status-reviewing' : zhujiao_class === 'gui-bg-green' ? 'status-approved' : zhujiao_class === 'gui-bg-red' ? 'status-rejected' : 'status-pending'">
							<text class="status-text">{{ zhujiao_status }}</text>
						</view>
						<text class="apply-arrow">></text>
					</view>
					
					<view class="apply-item" @tap="goto_coach_apply()">
						<view class="apply-icon coach-icon">
							<text class="icon-emoji">👨‍🏫</text>
						</view>
						<view class="apply-content">
							<text class="apply-name">教练申请</text>
							<text class="apply-desc">成为专业教练</text>
						</view>
						<view :class="coach_class === 'gui-bg-blue' ? 'status-pending' : coach_class === 'gui-bg-orange' ? 'status-reviewing' : coach_class === 'gui-bg-green' ? 'status-approved' : coach_class === 'gui-bg-red' ? 'status-rejected' : 'status-pending'">
							<text class="status-text">{{ coach_status }}</text>
						</view>
						<text class="apply-arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<view class="service-section">
			<view class="service-card">
				<view class="service-item">
					<view class="service-icon">
						<text class="icon-emoji">💬</text>
					</view>
					<view class="service-content">
						<button type="default" plain="true" open-type="contact" class="contact-btn">
							<text class="service-name">联系客服</text>
							<text class="service-desc">专业客服为您服务</text>
						</button>
					</view>
					<text class="service-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 身份切换模态框 -->
		<gui-modal ref="guimodal1" title="身份切换">
			<view slot="content" class="modal-content">
				<text class="modal-desc">请选择切换的身份</text>
			</view>
			<view slot="btns" class="modal-btns">
				<view 
					class="modal-btn" 
					v-for="(item, index) in shenfen_arr"
					:key="index"
					@tap="confirm1(item.identity_name)"
				>
					<text class="modal-btn-text">{{ item.identity_name }}</text>
				</view>
			</view>
		</gui-modal>

		<gui-footer-custom :navCurrents="4"></gui-footer-custom>
		<gui-iphone-bottom></gui-iphone-bottom>
	</view>
</template>
<script>
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		data() {
			return {
				shenfen_arr: [],
				member_identity_list: [],
				nickname: '',
				avatar_pic: img,
				identity_list: [],
				no_read_num: 0,
				items: [
					[80, '', '动态'],
					[100, '', '好友'],
					[50, '', '私信'],
					['￥199', '', '余额']
				],
				swiperItems: [],
				is_qiutong: 0,
				is_zhujiao: 0,
				is_jiaolian: 0,
				qiutong_status: '待申请',
				qiutong_class: 'gui-bg-blue',
				zhujiao_status: '待申请',
				zhujiao_class: 'gui-bg-blue',
				coach_status: '待申请',
				coach_class: 'gui-bg-blue',
				reason: '',
				mobile: ''
			}
		},
		methods: {
			confirm1(identity_name) {
				if (identity_name == '用户') {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}

				if (identity_name == '球伴') {
					uni.reLaunch({
						url: '/pages/index/player_index'
					})
				}

				if (identity_name == '商家') {
					uni.reLaunch({
						url: '/pages/index/shop_index'
					})
				}
			},
			goto_login() {
				uni.reLaunch({
					url: '/pages/index/login'
				})
			},
			change_identity() {
				this.$refs.guimodal1.open();
			},
			close1() {
				this.$refs.guimodal1.close();
			},
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			},
			goto_my_edit() {
				uni.navigateTo({
					url: '/pages/my/my_edit'
				})
			},
			my_info() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.user/my_info', //仅为示例，并非真实接口地址。

					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.nickname = return_data.data.member_info.nickname;
							_this.avatar_pic = return_data.data.member_info.avatar_pic;
							_this.no_read_num = return_data.data.no_read_num;
							_this.swiperItems = return_data.data.banner_list;
							_this.mobile = return_data.data.member_info.mobile;


							var member_identity_list = return_data.data.member_identity_list;
							_this.member_identity_list = member_identity_list;
							_this.shenfen_arr = return_data.data.shenfen_arr;
							console.log(_this.member_identity_list);

							for (var i = 0; i < member_identity_list.length; i++) {
								_this.reason = member_identity_list[i].reason;
								if (member_identity_list[i].identity == 2) {
									_this.is_qiutong = 1;

									if (member_identity_list[i].status == 0) {
										_this.qiutong_status = '待审核';
										_this.qiutong_class = 'gui-bg-orange'

									}

									if (member_identity_list[i].status == 1) {
										_this.qiutong_status = '审核通过';
										_this.qiutong_class = 'gui-bg-green'
									}

									if (member_identity_list[i].status == 2) {
										_this.qiutong_status = '审核拒绝';
										_this.qiutong_class = 'gui-bg-red'
									}
								}
								if (member_identity_list[i].identity == 3) {
									_this.is_zhujiao = 1;

									if (member_identity_list[i].status == 0) {
										_this.zhujiao_status = '待审核';
										_this.zhujiao_class = 'gui-bg-orange'

									}

									if (member_identity_list[i].status == 1) {
										_this.zhujiao_status = '审核通过';
										_this.zhujiao_class = 'gui-bg-green'
									}

									if (member_identity_list[i].status == 2) {
										_this.zhujiao_status = '审核拒绝';
										_this.zhujiao_class = 'gui-bg-red'
									}
								}
								if (member_identity_list[i].identity == 4) {
									_this.is_jiaolian = 1;

									if (member_identity_list[i].status == 0) {
										_this.coach_status = '待审核';
										_this.coach_class = 'gui-bg-orange'

									}

									if (member_identity_list[i].status == 1) {
										_this.coach_status = '审核通过';
										_this.coach_class = 'gui-bg-green'
									}

									if (member_identity_list[i].status == 2) {
										_this.coach_status = '审核拒绝';
										_this.coach_class = 'gui-bg-red'
									}
								}
							}

						}
					}
				});
			},
			goto_order() {
				uni.navigateTo({
					url: '/pages/order/list'
				})
			},
			goto_collect() {
				uni.navigateTo({
					url: '/pages/my/collect'
				})
			},
			goto_qiutong_apply() {

				if (this.qiutong_status == '待审核') {
					uni.showToast({
						title: '您的球童申请已提交，请耐心等待平台审核',
						icon: 'none'
					});

					return;
				}

				if (this.qiutong_status == '审核拒绝') {

					uni.navigateTo({
						url: "/pages/apply/primary",
						success: function() {
							uni.showToast({
								title: '拒绝原因：' + this.reason,
								icon: 'none'
							});
						}
					})


					return;
				}


				uni.navigateTo({
					url: "/pages/apply/primary"
				})

			},
			goto_zhujiao_apply() {

				if (this.zhujiao_status == '待审核') {
					uni.showToast({
						title: '您的助教申请已提交，请耐心等待平台审核',
						icon: 'none'
					});

					return;
				}

				if (this.zhujiao_status == '审核拒绝') {
					uni.showToast({
						title: '拒绝原因：' + this.reason,
						icon: 'none'
					});

					return;
				}


				uni.navigateTo({
					url: "/pages/apply/intermediate"
				})
			},
			goto_coach_apply() {

				if (this.coach_status == '待审核') {
					uni.showToast({
						title: '您的教练申请已提交，请耐心等待平台审核',
						icon: 'none'
					});

					return;
				}

				if (this.coach_status == '审核拒绝') {
					uni.showToast({
						title: '拒绝原因：' + this.reason,
						icon: 'none'
					});

					return;
				}


				uni.navigateTo({
					url: "/pages/apply/senior"
				})
			},
			goto_notice() {
				uni.navigateTo({
					url: '/pages/my/message'
				})
			},
			logout() {
				this.graceJS.removeStorage('token');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}

		},
		onLoad: function() {
			this.$globalMethod();
			this.my_info();
		}
	}
</script>
<style scoped>
	/* 主容器 */
	.my-container {
		background: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	/* 用户信息卡片 */
	.user-card {
		margin: 30rpx;
		margin-top: 50rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar-container {
		margin-right: 20rpx;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid #5a9fd4;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 15rpx;
	}

	.identity-section,
	.login-section {
		margin-top: 10rpx;
	}

	.identity-btn,
	.login-btn {
		display: flex;
		align-items: center;
		background: #5a9fd4;
		border-radius: 15rpx;
		padding: 8rpx 15rpx;
		transition: all 0.3s ease;
		width: fit-content;
	}

	.identity-btn:active,
	.login-btn:active {
		transform: scale(0.95);
	}

	.identity-icon,
	.login-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}

	.identity-text,
	.login-text {
		font-size: 24rpx;
		color: white;
		font-weight: 500;
	}

	.edit-btn {
		width: 60rpx;
		height: 60rpx;
		background: #f0f0f0;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.edit-btn:active {
		transform: scale(0.9);
	}

	.edit-icon {
		font-size: 28rpx;
	}

	/* 轮播图区域 */
	.banner-section {
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 菜单区域 */
	.menu-section,
	.apply-section,
	.service-section {
		margin: 20rpx 30rpx;
	}

	.menu-card,
	.apply-card,
	.service-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.menu-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 25rpx;
	}

	/* 菜单项样式 */
	.menu-list,
	.apply-list {
		display: flex;
		flex-direction: column;
	}

	.menu-item,
	.apply-item,
	.service-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.3s ease;
	}

	.menu-item:last-child,
	.apply-item:last-child,
	.service-item:last-child {
		border-bottom: none;
	}

	.menu-item:active,
	.apply-item:active,
	.service-item:active {
		background: #f8f9fa;
		border-radius: 10rpx;
	}

	/* 图标样式 */
	.menu-icon,
	.apply-icon,
	.service-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.order-icon {
		background: linear-gradient(135deg, #5a9fd4, #74b9ff);
	}

	.collect-icon {
		background: linear-gradient(135deg, #fd79a8, #e84393);
	}

	.message-icon {
		background: linear-gradient(135deg, #00b894, #00a085);
	}

	.qiutong-icon {
		background: linear-gradient(135deg, #74b9ff, #0984e3);
	}

	.zhujiao-icon {
		background: linear-gradient(135deg, #a29bfe, #6c5ce7);
	}

	.coach-icon {
		background: linear-gradient(135deg, #fd79a8, #e84393);
	}

	.service-icon {
		background: linear-gradient(135deg, #81ecec, #00cec9);
	}

	.icon-emoji {
		font-size: 40rpx;
	}

	/* 内容样式 */
	.menu-content,
	.apply-content,
	.service-content {
		flex: 1;
		margin-right: 15rpx;
	}

	.menu-name,
	.apply-name,
	.service-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 5rpx;
	}

	.menu-desc,
	.apply-desc,
	.service-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 状态标签 */
	.apply-status {
		border-radius: 15rpx;
		padding: 8rpx 15rpx;
		margin-right: 15rpx;
	}

	.status-pending {
		background: #5a9fd4;
	}

	.status-reviewing {
		background: #fdcb6e;
	}

	.status-approved {
		background: #00b894;
	}

	.status-rejected {
		background: #e17055;
	}

	.status-text {
		font-size: 22rpx;
		color: white;
		font-weight: 500;
	}

	/* 消息徽章 */
	.menu-badge {
		background: #e17055;
		border-radius: 15rpx;
		padding: 4rpx 10rpx;
		margin-right: 15rpx;
		min-width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.badge-text {
		font-size: 20rpx;
		color: white;
		font-weight: 500;
	}

	/* 箭头 */
	.menu-arrow,
	.apply-arrow,
	.service-arrow {
		font-size: 32rpx;
		color: #ccc;
	}

	/* 客服按钮 */
	.contact-btn {
		width: 100%;
		text-align: left;
		border: none !important;
		outline: none !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-shadow: none !important;
	}

	.contact-btn::after {
		border: none !important;
	}

	/* 模态框样式 */
	.modal-content {
		padding: 30rpx;
		text-align: center;
	}

	.modal-desc {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.modal-btns {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		padding: 0 30rpx 30rpx;
	}

	.modal-btn {
		background: #5a9fd4;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		transition: all 0.3s ease;
	}

	.modal-btn:active {
		transform: scale(0.98);
	}

	.modal-btn-text {
		font-size: 28rpx;
		color: white;
		font-weight: 500;
	}

	/* 兼容原有样式 */
	.gui-block-text,
	.gui-text-small,
	.gui-text-center,
	.gui-color-gray,
	.gui-italic {
		/* 保持原有GraceUI样式 */
	}
</style>